<!--
  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->


<div class="data-type-fields-structure">
    <div class="open-close">
        <div class="open-close-button" data-ng-class="{'expand':expand,'collapse':!expand}" data-ng-click="expandAndCollapse()"></div>
        <span class="data-type-name">{{typeName.replace("org.openecomp.datatypes.heat.","")}}</span>
    </div>
    <div data-ng-show="expand" data-ng-repeat="property in dataTypeProperties" class="property">
        <div class="i-sdc-form-item property-name">
            <div tooltips tooltip-content="{{property.name}}">
                <input class="i-sdc-form-input"
                       type="text"
                       readonly="readonly"
                       value="{{property.name}}"/>
            </div>
        </div>
        <!--<div class="property-value">-->
        <div class="inner-structure tosca-box tosca-parent">
            <div class="tosca-box">
                <form class="temp-form" data-ng-if="isService">
                    <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}" data-ng-checked="verifyTosca(property.name) == false" data-ng-click="onEnableTosca(false,property.name)"/> 
                    Value
                    <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}" data-ng-checked="verifyTosca(property.name)" data-ng-click="onEnableTosca(true,property.name)" /> 
                    {{'TOSCA_FUNCTION_LABEL' | translate}}
                </form>
            </div>
            <div data-ng-if="verifyTosca(property.name)" class="div-tosca-function">
                <tosca-function [property]="getSubProperty(property.name)"
                                [component-instance-map]="componentInstanceMap"
                                [allow-clear]="false"
                                [composition-map]="true"
                                [composition-map-key]="property.name"
                                [complex-list-key]="complexToscapath"
                                (on-valid-function)="onGetToscaFunction($event,property.name)"
                >
                </tosca-function>
            </div>
            <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property) && !verifyTosca(property.name)" class="tosca-box">
                <fields-structure value-obj-ref="(valueObjRef[property.name])"
                                type-name="property.type"
                                parent-property="parentProperty"
                                component-instance-map="componentInstanceMap"
                                parent-form-obj="parentFormObj"
                                fields-prefix-name="fieldsPrefixName+property.name"
                                read-only="readOnly"
                                is-service="isService"
                                complex-toscapath="property.name"
                                default-value="{{currentTypeDefaultValue[property.name]}}">

                </fields-structure>
            </div>
            <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property) && !verifyTosca(property.name)" ng-switch="property.type" class="tosca-box">
                <div ng-switch-when="map">
                    <type-map value-obj-ref="valueObjRef[property.name]"
                            schema-property="getSubProperty(property.name).schema.property"
                            parent-property="getSubProperty(property.name)"
                            component-instance-map="componentInstanceMap"
                            parent-form-obj="parentFormObj[fieldsPrefixName + property.name]"
                            fields-prefix-name="fieldsPrefixName+property.name"
                            read-only="readOnly"
                            default-value="{{currentTypeDefaultValue[property.name]}}"
                            is-service="isService"
                            complex-toscapath="property.name"
                            types="types"></type-map>
                </div>
                <div ng-switch-when="list">
                    <type-list value-obj-ref="valueObjRef[property.name]"
                            schema-property="getSubProperty(property.name).schema.property"
                            parent-property="getSubProperty(property.name)"
                            component-instance-map="componentInstanceMap"
                            parent-form-obj="parentFormObj[fieldsPrefixName + property.name]"
                            fields-prefix-name="fieldsPrefixName+property.name"
                            read-only="readOnly"
                            default-value="{{currentTypeDefaultValue[property.name]}}"
                            is-service="isService"
                            complex-toscapath="property.name"
                            types="types"></type-list>
                </div>
                <div ng-switch-default class="primitive-value-field">
                    <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}">
                        <!-- Has Constraints -->

                        <!--<select class="i-sdc-form-select"-->
                        <!--ng-if="(property.constraints)"-->
                        <!--data-ng-disabled="readOnly"-->
                        <!--name="{{fieldsPrefixName+property.name}}"-->
                        <!--data-ng-change="onValueChange(property.name,'constraintsChange')"-->
                        <!--data-ng-model="valueObjRef[property.name]"-->
                        <!--&gt;-->
                        <!--&lt;!&ndash; Get the default value in case exist &ndash;&gt;-->
                        <!--<option value = "{{valueObjRef[property.name]}}" name = "{{valueObjRef[property.name]}}" hidden selected>-->
                        <!--{{valueObjRef[property.name]}}-->
                        <!--</option> -->
                        <!--&lt;!&ndash; add all constratint to Select list &ndash;&gt;-->
                        <!--<option ng-repeat='value in property.constraints[0].validValues' value="{{value}}" >-->
                        <!--{{value}}-->
                        <!--</option> -->
                        <!--</select>-->
                        <!-- Input without constraints -->
                        <input class="i-sdc-form-input"
                            data-tests-id="{{fieldsPrefixName+property.name}}"
                            ng-if="!((property.simpleType||property.type) == 'boolean')"
                            data-ng-maxlength="100"
                            data-ng-readonly="readOnly"
                            maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}"
                            data-ng-model="valueObjRef[property.name]"
                            type="text"
                            name="{{fieldsPrefixName+property.name}}"
                            data-ng-pattern="getValidationPattern((property.simpleType||property.type))"
                            data-ng-model-options="{ debounce: 200 }"
                            data-ng-change="inputOnValueChange(property,valueObjRef[property.name])"
                            autofocus
                        />
                        <select class="i-sdc-form-select"
                                data-tests-id="{{fieldsPrefixName+property.name}}"
                                ng-if="(property.simpleType||property.type) == 'boolean'"
                                data-ng-disabled="readOnly"
                                name="{{fieldsPrefixName+property.name}}"
                                data-ng-change="onValueChange(property.name,'boolean')"
                                data-ng-model="valueObjRef[property.name]"
                                data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]">
                        </select>

                        <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid">
                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--</div>-->

    </div>
</div>
